<template>
    <el-dialog v-model="show" title="图标列表" width="800">
        <el-icon :size="32" v-for="icon in icons" :key="icon" style="margin: 8px;">
            <component :is="icon" />
        </el-icon>
    </el-dialog>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { ref } from 'vue'
const icons = ref([])
const show = ref(false)

const initIcons = () => {
    for (const [key] of Object.entries(ElementPlusIconsVue)) {
        icons.value.push(key)
    }
}

const openIconList = () => {
    if (icons.value.length == 0) {
        initIcons()
    }
    show.value = true
}
defineExpose({
    openIconList
})
</script>